<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
	<title></title>
	<style>
		
		.accordion_menu{
			position:absolute;
			left:50px;
			top:50px;
			
			width:300px;
			padding:20px 0;
			
			background-color:#eeeeee;
		}
		
		.accordion_menu .menu_item{
			position:relative;
			height:20px;
			
			overflow:hidden;
			border:1px solid #000000;
		}
		
		.accordion_menu .menu_item  .menu_item_content{
			position:absolute;			
		}
		.accordion_menu .menu_item  .menu_item_content > img{
			display:block;
		}

	</style>
	<!--
		Step #1
	     	  	메뉴 구조 잡기.
	-->
	<script  type="text/javascript"  src="../libs/jquery-1.7.1.min.js"></script>
	<script  type="text/javascript"  src="../libs/jquery.easing.1.3.js"></script>
	<script>
		var $currentActiveMenuItem;
		
		$(document).ready(function(){
		
			$(".menu_item").bind("mouseenter", function(){
				//1. 활성화된  메뉴아이템이 있는 경우 비활성화 시켜준다.
				if($currentActiveMenuItem){
					//1-1. 메뉴아이템의 높이값을 축소.
					$currentActiveMenuItem.stop();
					$currentActiveMenuItem.animate({height:20}, 
								200,
								"easeOutQuint"
					);
					
					//1-2. 메뉴아이템의 컨텐츠 위치값을 0으로만든다.(메뉴아이템 비활성화영역이 보이도록) 
					$currentActiveMenuItem.find("div").stop();
					$currentActiveMenuItem.find("div").animate({top:0}, 
						200,
						"easeOutQuint"
					);
				}
				
				// 활성화된 메뉴 아이템 업데이트.
				$currentActiveMenuItem		= $(this);
				
				//2. 메뉴아이템을 활성화 시켜준다.
				//2-1. 메뉴아이템의 높이값을 메뉴아이템 이미지만큼 확대시켜줌.
				$currentActiveMenuItem.stop();
				$currentActiveMenuItem.animate({height:93}, 
					200,
					"easeOutQuint"
				);
				//2-2. 메뉴아이템 컨텐츠 위치값을 -20만큼 이동시킨다(메뉴아이템 활성화영역이 보이도록)
				$currentActiveMenuItem.find("div").stop();
				$currentActiveMenuItem.find("div").animate({top:-20}, 
					200,
					"easeOutQuint"
				);
			});
		});
	</script>
</head>

<body>
	<div class="accordion_menu">
		<div class="menu_item">
			<div class="menu_item_content">	
				<img src="../images/menu_1.png">
				<img src="../images/menu_1_over.png" >
			</div>				
		</div>
		<div class="menu_item">
			<div class="menu_item_content">	
				<img src="../images/menu_2.png">
				<img src="../images/menu_2_over.png" >
			</div>				
		</div>
	</div>
</body>
</html>
